﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        fieldset
        {
            margin-bottom: 20px;
            display: none;
        }
        label
        {
            color: Red;
            font-size: 16px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
    <fieldset>
        <legend>ques 1</legend>
        <select>
            <option value="true">true</option>
            <option value="false">false</option>
        </select>
        <button>
            submit</button>
        <label>
        </label>
    </fieldset>
    <fieldset>
        <legend>ques 2</legend>
        <select>
            <option value="true">true</option>
            <option value="false">false</option>
        </select>
        <button>
            submit</button>
        <label>
        </label>
    </fieldset>
    <fieldset>
        <legend>ques 3</legend>
        <select>
            <option value="true">true</option>
            <option value="false">false</option>
        </select>
        <button>
            submit</button>
        <label>
        </label>
    </fieldset>
    <script type="text/javascript">
        var errorMap = [],
            currQues = 0,
            errorTimes = 0;



        function submitAnswer() {

            if ($("fieldset>select").eq(currQues).val() == 'true') {
                $("label").eq(currQues).text("correct answer");
                currQues = currQues + 1;
                $("fieldset").eq(currQues).show();
                errorTimes = 0;
            } else {
                errorTimes = errorTimes + 1;

                $("label").eq(currQues).text("error " + errorTimes + " times");
                if (errorTimes > 2) {

                    errorMap.push(currQues);

                    currQues = currQues + 1;
                    $("fieldset").eq(currQues).show();
                    errorTimes = 0;
                }
            }

            console.log(currQues + " : " + $('fieldset').length);
            if (currQues == $('fieldset').length) {
                $('fieldset').hide();
                $.each(errorMap, function (i, n) {
                    $('fieldset').eq(n).show();
                    $("label").eq(n).text("show correct answer: " + true);

                });

            }

        }

        $(function () {
            $("fieldset").eq(currQues).show();
            $("button").bind("click", function () {
                submitAnswer();
            });
        });
        

    </script>
</body>
</html>
